import React, { Component } from 'react';
import { routerRedux, Route, Switch } from 'dva/router';
import { connect } from 'dva';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import { getRoutes } from '../../../utils/utils';
import {
  Row,
  Col,
  Button,
  Menu,
  Icon,
  Select,
  Dropdown,
  Drawer,
  Form,
  Input,
  DatePicker,
  Modal,
  Upload,
  message
} from 'antd';
import DescriptionList from 'components/DescriptionList';
import styles from './Autotest.less';
const { Description } = DescriptionList;
const Option = Select.Option;
const clientData = ['Android', 'iOS', 'WEB', 'Windows', 'macOS'];
const projectData = ['makeblock', 'mBlockgo'];
const versionData = {
  makeblock: ['20190321135454', '20190302112433', '20190308174512'],
  mBlockgo: ['v1.0.0', 'v1.1.0', 'v1.2.0'],
};

const iosSvg = () => (//svg图片尝试
  <svg t="1553678595144" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3914" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M284.444444 0h455.111112a65.015873 65.015873 0 0 1 65.015873 65.015873v893.968254a65.015873 65.015873 0 0 1-65.015873 65.015873H284.444444a65.015873 65.015873 0 0 1-65.015873-65.015873V65.015873a65.015873 65.015873 0 0 1 65.015873-65.015873z" fill="#808080" p-id="3915"></path><path d="M519.493079 910.222222h1.771683a40.001016 40.001016 0 0 1 40.001016 40.001016v1.26781A40.001016 40.001016 0 0 1 521.264762 991.492063h-1.771683A40.001016 40.001016 0 0 1 479.492063 951.491048v-1.26781A40.001016 40.001016 0 0 1 519.493079 910.222222zM609.068698 76.702476H456.573968a10.126222 10.126222 0 0 1-10.109968-10.109968V66.47873c0-5.575111 4.534857-10.109968 10.109968-10.109968h152.49473c5.575111 0 10.109968 4.534857 10.109969 10.109968v0.113778a10.126222 10.126222 0 0 1-10.109969 10.109968z m-187.928381 0h-3.169523a10.126222 10.126222 0 0 1-10.109969-10.109968V66.47873c0-5.575111 4.534857-10.109968 10.109969-10.109968h3.169523c5.575111 0 10.093714 4.534857 10.093715 10.109968v0.113778a10.109968 10.109968 0 0 1-10.093715 10.109968zM284.444444 125.968254h446.984127a32.507937 32.507937 0 0 1 32.507937 32.507936v690.793651a32.507937 32.507937 0 0 1-32.507937 32.507937H284.444444a32.507937 32.507937 0 0 1-32.507936-32.507937V158.47619a32.507937 32.507937 0 0 1 32.507936-32.507936z" fill="#FFFFFF" p-id="3916"></path><path d="M622.998349 513.365333c-0.536381-49.607111 43.414349-73.402921 45.397334-74.605714-24.706032-33.645714-63.179175-38.245587-76.88127-38.781968-32.719238-3.088254-63.878095 17.960635-80.473397 17.960635-16.579048 0-42.211556-17.505524-69.355683-17.050413a104.122921 104.122921 0 0 0-86.95873 49.103238c-37.075302 59.912127-9.492317 148.707556 26.640254 197.339429 17.65181 23.779556 38.716952 50.517333 66.348699 49.542095 26.624-0.975238 36.685206-16.042667 68.851809-16.042667 32.199111 0 41.236317 16.042667 69.404445 15.538794 28.639492-0.471365 46.795175-24.218413 64.316952-48.079238 20.268698-27.615492 28.623238-54.369524 29.127111-55.718603-0.650159-0.276317-55.848635-19.976127-56.417524-79.205588z m-52.939174-145.570539c14.677333-16.579048 24.592254-39.594667 21.894095-62.529016-21.146413 0.78019-46.746413 13.084444-61.927619 29.647238-13.588317 14.693587-25.486222 38.083048-22.316699 60.594794 23.600762 1.722921 47.672889-11.166476 62.350223-27.713016z" fill="#808080" p-id="3917"></path></svg>
);
const iosIcon = props => (
  <Icon component={iosSvg} {...props} />
);

const Dragger = Upload.Dragger;
const draggerprops = {
  name: 'file',
  multiple: true,
  action: '//jsonplaceholder.typicode.com/posts/',
  onChange(info) {
    const status = info.file.status;
    if (status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (status === 'done') {
      message.success(`${info.file.name} file uploaded successfully.`);
    } else if (status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};

class AndroidDrawerForm extends React.Component {
  state = { visible: false };

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  handleChange = (value) => {
    console.log(`select ${value}`)
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <div onClick={this.showDrawer}>
          <Icon style={{ marginRight: 5 }} type="android" />
          Android
        </div>
        <Drawer
          title="上传安装包"
          width={720}
          height={300}
          onClose={this.onClose}
          visible={this.state.visible}
          placement="top"
        >
          <Form layout="vertical" hideRequiredMark>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="所属项目">
                  {getFieldDecorator('projectname', {
                    rules: [{ required: true, message: '请选择所属的项目' }],
                  })(
                    <Select defaultValue="mBlock" style={{ width: 120 }} onChange={this.handleChange}>
                      <Option value="makeblock">MakeblockAPP</Option>
                      <Option value="mBlock">mBlock</Option>
                      <Option value="neuron">Neuron</Option>
                      <Option value="makeX">MakeX</Option>
                    </Select>
                  )}
                </Form.Item>
                <Form.Item label="关联版本">
                  {getFieldDecorator('projectversion', {
                    rules: [{ required: true, message: '请选择关联的版本号' }],
                  })(
                    <Select defaultValue="v5.0.1" style={{ width: 120 }} onChange={this.handleChange}>
                      <Option value="v5.0.1">v5.0.1</Option>
                      <Option value="v4.0.1">v4.0.1</Option>
                      <Option value="v3.0.1">v3.0.1</Option>
                      <Option value="v5.0.2">v5.0.2</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="上传安装包">
                  {getFieldDecorator('upload', {
                    rules: [{ required: true, message: '请上传对应的安装包' }],
                  })(
                    <Dragger {...draggerprops}>
                      <p className="ant-upload-drag-icon">
                        <Icon type="inbox" />
                      </p>
                      <p className="ant-upload-text">点击或拖动安装包到此处，完成上传</p>
                      <p className="ant-upload-hint">仅支持单个文件上传。请勿上传与提测包无关或其他不支持的文件</p>
                    </Dragger>
                  )}
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Drawer>
      </div>
    );
  }
}

const AndroidDrawerForCaseAdd = Form.create()(AndroidDrawerForm);

class IosDrawerForm extends React.Component {
  state = { visible: false };

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <div onClick={this.showDrawer}>
          <Icon style={{ marginRight: 5 }} type="apple" />
          iOS
        </div>
        <Drawer
          title="上传安装包"
          width={720}
          height={300}
          onClose={this.onClose}
          visible={this.state.visible}
          placement="top"
        >
          <Form layout="vertical" hideRequiredMark>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="所属项目">
                  {getFieldDecorator('projectname', {
                    rules: [{ required: true, message: '请选择所属的项目' }],
                  })(
                    <Select defaultValue="mBlock" style={{ width: 120 }} onChange={this.handleChange}>
                      <Option value="makeblock">MakeblockAPP</Option>
                      <Option value="mBlock">mBlock</Option>
                      <Option value="neuron">Neuron</Option>
                      <Option value="makeX">MakeX</Option>
                    </Select>
                  )}
                </Form.Item>
                <Form.Item label="关联版本">
                  {getFieldDecorator('projectversion', {
                    rules: [{ required: true, message: '请选择关联的版本号' }],
                  })(
                    <Select defaultValue="v5.0.1" style={{ width: 120 }} onChange={this.handleChange}>
                      <Option value="v5.0.1">v5.0.1</Option>
                      <Option value="v4.0.1">v4.0.1</Option>
                      <Option value="v3.0.1">v3.0.1</Option>
                      <Option value="v5.0.2">v5.0.2</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="上传安装包">
                  {getFieldDecorator('upload', {
                    rules: [{ required: true, message: '请上传对应的安装包' }],
                  })(
                    <Dragger {...draggerprops}>
                      <p className="ant-upload-drag-icon">
                        <Icon type="inbox" />
                      </p>
                      <p className="ant-upload-text">点击或拖动安装包到此处，完成上传</p>
                      <p className="ant-upload-hint">仅支持单个文件上传。请勿上传与提测包无关或其他不支持的文件</p>
                    </Dragger>
                  )}
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Drawer>
      </div>
    );
  }
}

const IosDrawerForCaseAdd = Form.create()(IosDrawerForm);

class WebDrawerForm extends React.Component {
  state = { visible: false };

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <div onClick={this.showDrawer}>
          <Icon style={{ marginRight: 5 }} type="chrome" />
          WEB/H5
        </div>
        <Drawer
          title="上传安装包"
          width={720}
          height={300}
          onClose={this.onClose}
          visible={this.state.visible}
          placement="top"
        >
          <Form layout="vertical" hideRequiredMark>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="所属项目">
                  {getFieldDecorator('projectname', {
                    rules: [{ required: true, message: '请选择所属的项目' }],
                  })(
                    <Select defaultValue="mBlock" style={{ width: 120 }} onChange={this.handleChange}>
                      <Option value="makeblock">MakeblockAPP</Option>
                      <Option value="mBlock">mBlock</Option>
                      <Option value="neuron">Neuron</Option>
                      <Option value="makeX">MakeX</Option>
                    </Select>
                  )}
                </Form.Item>
                <Form.Item label="关联版本">
                  {getFieldDecorator('projectversion', {
                    rules: [{ required: true, message: '请选择关联的版本号' }],
                  })(
                    <Select defaultValue="v5.0.1" style={{ width: 120 }} onChange={this.handleChange}>
                      <Option value="v5.0.1">v5.0.1</Option>
                      <Option value="v4.0.1">v4.0.1</Option>
                      <Option value="v3.0.1">v3.0.1</Option>
                      <Option value="v5.0.2">v5.0.2</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="测试Url">
                  {getFieldDecorator('url', {
                    rules: [{ required: true, message: '请输入合法url' }],
                  })(
                    <Input
                      style={{ width: '100%' }}
                      addonBefore="https://"
                      placeholder="请输入测试url"
                    />
                  )}
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Drawer>
      </div>
    );
  }
}

const WebDrawerForCaseAdd = Form.create()(WebDrawerForm);

class WindowsDrawerForm extends React.Component {
  state = { visible: false };

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <div onClick={this.showDrawer}>
          <Icon style={{ marginRight: 5 }} type="windows" />
          Windows
        </div>
        <Drawer
          title="Create a new account"
          width={720}
          height={750}
          onClose={this.onClose}
          visible={this.state.visible}
          placement="top"
        >
          <Form layout="vertical" hideRequiredMark>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="Name">
                  {getFieldDecorator('name', {
                    rules: [{ required: true, message: 'Please enter user name' }],
                  })(<Input placeholder="Please enter user name" />)}
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="Url">
                  {getFieldDecorator('url', {
                    rules: [{ required: true, message: 'Please enter url' }],
                  })(
                    <Input
                      style={{ width: '100%' }}
                      addonBefore="http://"
                      addonAfter=".com"
                      placeholder="Please enter url"
                    />
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="Owner">
                  {getFieldDecorator('owner', {
                    rules: [{ required: true, message: 'Please select an owner' }],
                  })(
                    <Select placeholder="Please select an owner">
                      <Option value="xiao">Xiaoxiao Fu</Option>
                      <Option value="mao">Maomao Zhou</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="Type">
                  {getFieldDecorator('type', {
                    rules: [{ required: true, message: 'Please choose the type' }],
                  })(
                    <Select placeholder="Please choose the type">
                      <Option value="private">Private</Option>
                      <Option value="public">Public</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="Approver">
                  {getFieldDecorator('approver', {
                    rules: [{ required: true, message: 'Please choose the approver' }],
                  })(
                    <Select placeholder="Please choose the approver">
                      <Option value="jack">Jack Ma</Option>
                      <Option value="tom">Tom Liu</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="DateTime">
                  {getFieldDecorator('dateTime', {
                    rules: [{ required: true, message: 'Please choose the dateTime' }],
                  })(
                    <DatePicker.RangePicker
                      style={{ width: '100%' }}
                      getPopupContainer={trigger => trigger.parentNode}
                    />
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={24}>
                <Form.Item label="Description">
                  {getFieldDecorator('description', {
                    rules: [
                      {
                        required: true,
                        message: 'please enter url description',
                      },
                    ],
                  })(<Input.TextArea rows={4} placeholder="please enter url description" />)}
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <div
            style={{
              position: 'absolute',
              left: 0,
              bottom: 0,
              width: '100%',
              borderTop: '1px solid #e9e9e9',
              padding: '10px 16px',
              background: '#fff',
              textAlign: 'right',
            }}
          >
            <Button onClick={this.onClose} style={{ marginRight: 8 }}>
              Cancel
            </Button>
            <Button onClick={this.onClose} type="primary">
              Submit
            </Button>
          </div>
        </Drawer>
      </div>
    );
  }
}

const WindowsDrawerForCaseAdd = Form.create()(WindowsDrawerForm);

class MacOSDrawerForm extends React.Component {
  state = { visible: false };

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <div onClick={this.showDrawer}>
          <Icon style={{ marginRight: 5 }} type="apple" />
          MacOS
        </div>
        <Drawer
          title="Create a new account"
          width={720}
          height={750}
          onClose={this.onClose}
          visible={this.state.visible}
          placement="top"
        >
          <Form layout="vertical" hideRequiredMark>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="Name">
                  {getFieldDecorator('name', {
                    rules: [{ required: true, message: 'Please enter user name' }],
                  })(<Input placeholder="Please enter user name" />)}
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="Url">
                  {getFieldDecorator('url', {
                    rules: [{ required: true, message: 'Please enter url' }],
                  })(
                    <Input
                      style={{ width: '100%' }}
                      addonBefore="http://"
                      addonAfter=".com"
                      placeholder="Please enter url"
                    />
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="Owner">
                  {getFieldDecorator('owner', {
                    rules: [{ required: true, message: 'Please select an owner' }],
                  })(
                    <Select placeholder="Please select an owner">
                      <Option value="xiao">Xiaoxiao Fu</Option>
                      <Option value="mao">Maomao Zhou</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="Type">
                  {getFieldDecorator('type', {
                    rules: [{ required: true, message: 'Please choose the type' }],
                  })(
                    <Select placeholder="Please choose the type">
                      <Option value="private">Private</Option>
                      <Option value="public">Public</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="Approver">
                  {getFieldDecorator('approver', {
                    rules: [{ required: true, message: 'Please choose the approver' }],
                  })(
                    <Select placeholder="Please choose the approver">
                      <Option value="jack">Jack Ma</Option>
                      <Option value="tom">Tom Liu</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="DateTime">
                  {getFieldDecorator('dateTime', {
                    rules: [{ required: true, message: 'Please choose the dateTime' }],
                  })(
                    <DatePicker.RangePicker
                      style={{ width: '100%' }}
                      getPopupContainer={trigger => trigger.parentNode}
                    />
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={24}>
                <Form.Item label="Description">
                  {getFieldDecorator('description', {
                    rules: [
                      {
                        required: true,
                        message: 'please enter url description',
                      },
                    ],
                  })(<Input.TextArea rows={4} placeholder="please enter url description" />)}
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <div
            style={{
              position: 'absolute',
              left: 0,
              bottom: 0,
              width: '100%',
              borderTop: '1px solid #e9e9e9',
              padding: '10px 16px',
              background: '#fff',
              textAlign: 'right',
            }}
          >
            <Button onClick={this.onClose} style={{ marginRight: 8 }}>
              Cancel
            </Button>
            <Button onClick={this.onClose} type="primary">
              Submit
            </Button>
          </div>
        </Drawer>
      </div>
    );
  }
}

const MacOSDrawerForCaseAdd = Form.create()(MacOSDrawerForm);

const menu = (
  <Menu>
    <Menu.Item key="1" ><AndroidDrawerForCaseAdd /></Menu.Item>
    {/* <Menu.Item key="2"><iosIcon />iOS</Menu.Item> */}
    {/* <Menu.Item key="2"><Icon type="apple" />iOS</Menu.Item> */}
    <Menu.Item key="2"><IosDrawerForCaseAdd /></Menu.Item>
    <Menu.Item key="3"><WebDrawerForCaseAdd /></Menu.Item>
    <Menu.Item disabled={true} key="4"><WindowsDrawerForCaseAdd /></Menu.Item>
    <Menu.Item disabled={true} key="5"><MacOSDrawerForCaseAdd /></Menu.Item>
  </Menu>
);

const extra = (
  <Row>
    <Col xs={24} sm={12}>
      <div className={styles.textSecondary}>状态</div>
      <div className={styles.heading}>
        <span style={{ color: 'red' }}>待测试</span>
        <div>已测试
          <div>
            <a href='#' style={{ fontSize: 14 }}>重新测试</a>
          </div>
        </div>
      </div>
    </Col>
  </Row>
);

const description = (
  <DescriptionList className={styles.headerList} size="small" col="2">
    <Description term="创建人">赵六</Description>
    <Description term="所属项目">
      <a href="">Makeblock</a>
    </Description>
    <Description term="上传时间">2019-03-20</Description>
    <Description term="关联版本">
      <a href="">v5.1.2</a>
    </Description>
    <Description term="生效日期">2019-03-20 ~ 2019-03-25</Description>
    <Description term="备注">请于两个工作日内提测</Description>
  </DescriptionList>
);

@connect()
export default class Autotest extends Component {
  state = {
    operationkey: 'tab1',
    stepDirection: 'horizontal',
    versions: versionData[projectData[0]],
    secondVersion: versionData[projectData[0]][0],
  };

  componentDidMount() {
    // const { dispatch } = this.props;
    // dispatch({
    //   type: 'autotest/fetchTestTableData',
    // });
    // this.setStepDirection();
    // window.addEventListener('resize', this.setStepDirection);
  }

  componentWillUnmount() {
    //   window.removeEventListener('resize', this.setStepDirection);
    //   this.setStepDirection.cancel();
  }

  onOperationTabChange = key => {
    this.setState({ operationkey: key });
  };

  handleProjectChange = (value) => {
    this.setState({
      versions: versionData[value],
      secondVersion: versionData[value][0],
    });
  }

  onSecondVersionChange = (value) => {
    this.setState({
      secondVersion: value,
    });
  }

  handleTabChange = key => {
    const { dispatch, match } = this.props;
    switch (key) {
      case 'testtable':
        dispatch(routerRedux.push(`${match.url}/testtable`));
        break;
      case 'testrun':
        dispatch(routerRedux.push(`${match.url}/testrun`));
        break;
      case 'testcase':
        dispatch(routerRedux.push(`${match.url}/testcase`));
        break;
      default:
        break;
    }
  };
  render() {
    const { versions } = this.state;
    const action = (//级联选择，只实现2级联动，需实现3级联动（增加客户端选择）
      <div>
        <Select
          defaultValue={clientData[0]}
          style={{ width: 100 }}

        >
          {clientData.map(client => <Option key={client}>{client}</Option>)}
        </Select>
        <Select
          defaultValue={projectData[0]}
          style={{ width: 140, paddingLeft: 5 }}
          onChange={this.handleProjectChange}
        >
          {projectData.map(project => <Option key={project}>{project}</Option>)}
        </Select>
        <Select
          style={{ width: 160, marginRight: 300, paddingLeft: 5 }}
          value={this.state.secondVersion}
          onChange={this.onSecondVersionChange}
        >
          {versions.map(version => <Option key={version}>{version}</Option>)}
        </Select>
        <Dropdown overlay={menu} trigger={['click']}>
          <Button type="primary">
            <Icon type="plus-circle" theme="filled" />
            添加应用
          </Button>
        </Dropdown>
      </div>
    );

    const tabList = [
      {
        key: 'testtable',
        tab: <span><Icon type="cluster"/>工作台</span>,
      },
      {
        key: 'testrun',
        tab: <span><Icon type="rocket"/>提测</span>,
      },
      {
        key: 'testcase',
        tab: <span><Icon type="gitlab"/>用例库</span>,
      },
    ];
    const { match, routerData, location } = this.props;
    const routes = getRoutes(match.path, routerData);

    return (
      <PageHeaderLayout
        title="makeblock_v3.4.0_Build2_release.apk"
        logo={
          <img alt="../../../assets/ClientIcon/icons8-android-48.png" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />
        }
        action={action}
        content={description}
        extraContent={extra}
        tabList={tabList}
        tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
        onTabChange={this.handleTabChange}
      >
        <Switch>
          {routes.map(item => (
            <Route key={item.key} path={item.path} component={item.component} exact={item.exact} />
          ))}
        </Switch>
      </PageHeaderLayout >
    );
  }
}
